<template>
<div>
  <table class="graphList-table">
    <tbody>
      <tr>
        <td class="graphList-td">
          <div class="graphList">
            <div class="main-div"   v-for="(item,index) in childrenList"  :class="{'main-div-selected':index==0}" @click="showHost(item.id,item.name,$event)">
              <div class="child-div"> <span class="icon-page-itemgreen item-span"></span></div>
              <div class="child-div">{{item.name}}</div>
            </div>
          </div>
        </td>
      </tr>
      <tr>
        <td class="graph-td">
          <div class="graph-div">
            <graphComp :keyMap="keyMap" :parentDesignerData='desigerData' :inputParams='params'></graphComp>
          </div>
        </td>
      </tr>
    </tbody>
  </table>
</div>
</template>
<script>
import graphComp from 'views/graph/designer.vue'
import api from 'api/device.js'

export default {
  props: {
    childrenList: {
      type: Array,
      default: function() {
        return [];
      }
    }
  },
  data() {
    return {
      activeName: 'first',
      keyMap: {
        editable: 'false'
      },
      desigerData: {},
      params: {}
    };
  },
  methods: {
    showHost(gid, gname, ev) {
      this.doShow(gid, gname, $(ev.target));
    },
    doShow(gid, gname, $el) {
      this.thisTitle = gname;
      $(".main-div").removeClass("main-div-selected");
      if ($el.hasClass("child-div")) {
        $el.parent().addClass("main-div-selected");
      } else {
        $el.addClass("main-div-selected");
      }

      api.queryGraphByHostid(gid).then((response) => {
        var graphList = response.data;
        this.params = {
          hostid: gid
        };
        this.desigerData = {
          "grsNo": 'host'
        };
        for (var i = 0; i < graphList.length; i++) {
          var idArray = [];
          var nameArray = [];
          var unitsArray = [];

          for(var j = 0;j<graphList[i].items.length;j++){
            idArray.push(graphList[i].items[j].itemid);
            nameArray.push(graphList[i].items[j].name);
            unitsArray.push(graphList[i].items[j].units);
          }
          this.params["|>"+graphList[i].name+"<|itemid"] = idArray;
          this.params["|>"+graphList[i].name+"<|itemname"] = nameArray;
          this.params["|>"+graphList[i].name+"<|unit"] = unitsArray;
        }

      }).catch((err) =>{
          console.error(err);
      });


    }
  },
  components: {
    graphComp
  },
  watch:{
    childrenList(){
      var firstChild = this.childrenList[0];
      this.doShow(firstChild.id,firstChild.name,$(".main-div :first"));
    }

  }
};
</script>
<style>
.graphList{
  height: 100px;
  overflow:auto;
}
.graphList-table {
  border: 0px;
  padding: 5px;
  width: 100%;
}

.graphList-td {
  vertical-align: top;
  font-size: 15px;
  background-color: #f9f9f9;
  height: 20%;
}

.graph-td {
}

.graph-div {
  height: auto;
  overflow-y: auto;
}

.main-div {
  float: left;
  margin: 8px;
  min-width: 300px;
  cursor: pointer;
}

.main-div :hover {
  text-decoration: underline;
}
.child-div :hover {
  color: #79f9f9;
  text-decoration: underline;
}
.main-div-selected {
  background-color: #20a0ff;
  color: #fff;
}

.child-div {
  float: left;
}

.item-span {
  margin: 0px;
  display: block;
}
</style>
